<template>
  <div class="home">
    <!-- 顶部定位和搜索 -->
    <div class="head">
      <router-link tag="div" class="location" to="/home/location">{{
        currentLocation
      }}</router-link>
      <router-link tag="div" class="search" to="/home/search">
        <van-icon name="search" size="16px" />
        <span>搜索商品</span>
      </router-link>
    </div>
    <div class="main">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" indicator-color="#000" class="swiper">
        <van-swipe-item v-for="item in banners" :key="item.id">
          <img :src="item.image_url" />
        </van-swipe-item>
      </van-swipe>
      <!-- 导航 -->
      <div class="channels">
        <router-link
          class="channel-item"
          v-for="item in channels"
          :key="item.id"
          tag="div"
          :to="`/category/categorylist?id=${item.id}`"
        >
          <img :src="item.icon_url" alt="" />
          <div class="name">
            {{ item.name }}
          </div>
        </router-link>
      </div>
      <!-- 品牌制造商 -->
      <div class="brand">
        <router-link tag="div" to="/home/brand" class="brand-head"
          >品牌制造商直供</router-link
        >
        <div class="list">
          <router-link
            class="item"
            v-for="item in brandList"
            :key="item.id"
            tag="div"
            :to="`/home/brand/branddetail?id=${item.id}`"
          >
            <img :src="item.new_pic_url" alt="" />
            <div class="info">
              <div>{{ item.name }}</div>
              <div>{{ item.floor_price }}元起</div>
            </div>
          </router-link>
        </div>
      </div>
      <!-- 新品推荐 -->
      <div class="newGoods">
        <router-link tag="div" class="newGoods-head" to="/goods?type=new">
          <div class="title">新品首发</div>
          <div class="more">查看全部</div>
        </router-link>
        <div class="list">
          <router-link
            tag="div"
            class="item"
            v-for="item in newGoods"
            :key="item.id"
            :to="`/goods/goodsdetail?id=${item.id}`"
          >
            <img :src="item.list_pic_url" alt="" />
            <div class="info">
              <p class="name">{{ item.name }}</p>
              <p class="desc">{{ item.goods_brief }}</p>
              <p class="price">￥{{ item.retail_price }}</p>
            </div>
          </router-link>
        </div>
      </div>
      <!-- 人气推荐 -->
      <div class="hotGoods">
        <router-link class="hotGoods-head" tag="div" to="/goods?type=hot">
          <div class="title">人气推荐 * 好物精选</div>
          <div class="more">查看全部</div>
        </router-link>
        <div class="list">
          <router-link
            tag="div"
            class="item"
            v-for="item in hotGoods"
            :key="item.id"
            :to="`/goods/goodsdetail?id=${item.id}`"
          >
            <img :src="item.list_pic_url" alt="" />
            <div class="info">
              <p class="name">{{ item.name }}</p>
              <p class="desc">{{ item.goods_brief }}</p>
              <p class="price">￥{{ item.retail_price }}</p>
            </div>
          </router-link>
        </div>
      </div>
      <!-- 精选专题 -->
      <div class="topic">
        <div class="topic-head">
          专题精选
          <img src="../../assets/images/right.png" alt="" />
        </div>
        <div class="list">
          <router-link
            tag="div"
            class="item"
            v-for="item in topicList"
            :key="item.id"
            :to="`/topic/topicdetail?id=${item.id}`"
          >
            <img :src="item.item_pic_url" alt="" />
            <div class="info">
              <p class="info-head">
                <span class="title">{{ item.title }}</span
                ><span class="price">{{ item.price_info }}元起</span>
              </p>
              <p class="subtitle">{{ item.subtitle }}</p>
            </div>
          </router-link>
        </div>
      </div>
      <!-- 好物商品列表 -->
      <div class="newCategoryList">
        <div
          class="category"
          v-for="category in newCategoryList"
          :key="category.id"
        >
          <div class="category-head">{{ category.name }}好物</div>
          <div class="list">
            <router-link
              tag="div"
              class="item"
              v-for="item in category.goodsList"
              :key="item.id"
              :to="`/goods/goodsdetail?id=${item.id}`"
            >
              <img :src="item.list_pic_url" alt="" />
              <div class="name">{{ item.name }}</div>
              <div class="price">￥{{ item.retail_price }}</div>
            </router-link>
            <router-link tag="div" class="more" :to="`/category/categorylist?id=${category.id}`">
              <p>{{ category.name }}好物</p>
              <img src="../../assets/images/icon_go_more.png" alt="" />
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { index } from "@/api/home";
export default {
  data() {
    return {
      currentLocation: "", // 当前定位城市
      banners: [], // 轮播图
      channels: [], // 频道导航
      brandList: [], // 商品制造商
      newGoods: [], // 新品推荐
      hotGoods: [], // 人气推荐
      newCategoryList: [], // 好物商品列表
      topicList: [], // 专题精选
    };
  },
  methods: {
    async init() {
      const res = await index();
      if (res.success) {
        this.banners = res.banner;
        this.brandList = res.brandList;
        this.channels = res.channel;
        this.hotGoods = res.hotGoods;
        this.newCategoryList = res.newCategoryList;
        this.newGoods = res.newGoods;
        this.topicList = res.topicList;
      } else {
        this.$toast("请求失败,请稍后再试");
      }
    },
  },
  created() {
    this.init();
  },
  mounted() {
    var that = this;
    if (this.$store.state.locationAddress.name) {
      this.currentLocation = this.$store.state.locationAddress.name;
    } else {
      var that = this;
      // 高德地图api获取当前所在城市
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            that.currentLocation = result.city;
          }
        });
      });
    }
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
